<template>
  <div class="page-c Detail">
    <!-- <p>歌单id：{{id}}</p> -->
    <div class="pic-pre">
      <span></span>
      <img class="tu" :src="coverImgUrl" :alt="coverImgUrl"/>
    </div>
    <!-- <p>歌单描述：{{description}}</p> -->
    <p class="text-des">风格：{{tags}}</p>
    <div class="song-name" v-for="(item,index) in songlistid" :key="index" @click.stop="toplay(item.id)">
      <div class="shell">
        <img class="sm-tu" v-lazy="item.al.picUrl" :alt="item.al.name" />
      </div>
      <div class="shell">
        <p class="tex">{{item.name}}</p>
        <p class="tex small">{{item.ar[0].name}}</p>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src

export default {
  name: "Detail",
  components: {},
  data() {
    return {
      id: "",
      coverImgUrl: "",
      tags: [],
      songlistid: [],
      playlist: {}
    };
  },
  
   methods:{
      toplay(id) {
      this.$router.push({
        path: "./play",
        name: "Play",
        params: {
          id:id
        }
      });
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.$axios({
      url: this.$URL.BASE_URL + "/playlist/detail",
      params: {
        id: this.id
      }
    })
      .then(res => {
        this.songlistid = res.data.playlist.tracks.map(v => {
          return v;
        });
        this.tags = res.data.playlist.tags;
        this.coverImgUrl = res.data.playlist.coverImgUrl;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style lang="scss" scoped>
.pic-pre {
  width: 40%;
  margin: 0 auto;
  .tu {
    width: 100%;
  }
}
.text-des {
  text-align: center;
  font-size: 12px;
  margin-bottom: 30px;
}

.song-name {
  display: flex;
  //   justify-content: space-between;
  // justify-content: center;
  height: 80px;
  width: 100%;
  background: #181818;
  margin-bottom: 10px;
  padding: 5px;
  box-sizing: border-box;
  .shell {
      font-size: 0;
    .sm-tu {
      width: 70px;
      margin-right: 20px;
      box-sizing: border-box;
      padding: 5px;
    }
    .tex{
        font-size: 14px;
        color: aliceblue;
        width:270px; 
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow:ellipsis

    }
    .tex.small{
        font-weight:lighter;
        font-size: 12px;
        color: rgba(240, 248, 255, 0.808)
    }
   
  }
}
</style>